import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Button, Spin, Form } from 'antd';
import {
  WeaTab,
  WeaRightMenu,
  WeaErrorPage,
  WeaTools,
  WeaSearchGroup,
  WeaNewScroll,
  WeaFormItem,
  WeaLocaleProvider,
} from 'ecCom';
import { WeaTableNew, WeaSwitch } from 'comsMobx';

const { WeaTable } = WeaTableNew;
const getLabel = WeaLocaleProvider.getLabel;

@WeaTools.tryCatch(
  React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@zqgst7`} msg={props.error || getLabel(385218, '对不起，该页面异常，请联系管理员！')} />,
  { error: '' },
)
@inject('docDocLogStore')
@observer
class DocLog extends React.Component {
  constructor(props) {
    super(props);
    this.isMouted = false;
  }
  componentDidMount() {
    this.isMouted = true;
  }
  componentWillUnmount() {
    const { docDocLogStore } = this.props;
    docDocLogStore.setState({ showSearchAd: false });
    this.isMouted = false;
  }
  getSearchs() {
    const { docDocLogStore } = this.props;
    const { conditioninfo, form } = docDocLogStore;
    const { isFormInit } = form;
    const group = [];
    const formParams = form.getFormParams();
    isFormInit && toJS(conditioninfo).forEach((c) => {
      let items = [];
      c.items.forEach((field) => {
        items.push({
          com: (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9lfn6k@${field.domkey[0]}`}
              label={`${field.label}`}
              labelCol={{ span: field.labelcol }}
              wrapperCol={{ span: field.fieldcol }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@2wcp6f@${field.domkey[0]}`} fieldConfig={field} form={form} formParams={formParams} />
            </WeaFormItem>
          ),
          colSpan: 1,
        });
      });
      group.push(
        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@eb33mq@${c.title}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />,
      );
    });
    return group;
  }
  getTabButtonsAd() {
    const { docDocLogStore, docid } = this.props;
    const { viewcondition, form } = docDocLogStore;
    return [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vccwe1@search`} type="primary"
        onClick={() => {
        docDocLogStore.doSearch('DocLog', { viewcondition, docid, ...form.getFormParams() })
          .setState({ showSearchAd: false });
      }}
      >{getLabel(197, '搜索')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@llohok@reset`} type="ghost" onClick={() => form.reset()}>{getLabel(2022, '重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tmllvh@cancel`} type="ghost"
        onClick={() => docDocLogStore.setState({ showSearchAd: false })}
      >{getLabel(31129, '取消')}</Button>,
    ];
  }
  getRightMenu() {
    const { docDocLogStore, docid } = this.props;
    const { viewcondition, loading, rightMenu, form, comsWeaTableStore } = docDocLogStore;
    const loadingNow = loading || comsWeaTableStore.loading;
    const btnArr = [];
    rightMenu.forEach((m) => {
      let onClick = () => {};
      let content = '';
      let disabled = false;
      if (m.type === 'BTN_SEARCH') {
        disabled = loadingNow;
        content = m.menuName;
        onClick = () => {
          docDocLogStore.doSearch('DocLog', { viewcondition, docid, ...form.getFormParams() })
            .setState({ showSearchAd: false });
        };
      }
      btnArr.push({
        key: m.type,
        icon: <i className={m.menuIcon} />,
        content,
        disabled,
        onClick,
      });
    });
    return btnArr;
  }

  setShowSearchAd=(bool)=>{
    const {docDocLogStore}=this.props;
    docDocLogStore.setState({ showSearchAd: bool })
  }
  hideSearchAd=()=>{
    const {docDocLogStore}=this.props;
    docDocLogStore.setState({ showSearchAd: false })
  }

  onTabChange=(v)=>{
    const {docDocLogStore, docid}=this.props;
    const {form}=docDocLogStore;
    docDocLogStore.setState({ viewcondition: v })
      .doSearch('DocLog', { viewcondition: v, docid });
    form.reset();
  }
  render() {
    const { docDocLogStore, docid } = this.props;
    const { viewcondition, loading, comsWeaTableStore, form, tabInfo,
      showSearchAd } = docDocLogStore;
    const loadingNow = loading || comsWeaTableStore.loading;
    return (
      <div className="wea-doc-log">
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@7fqoyx`} datas={this.getRightMenu()}>
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@i8l2ob`}
            buttonsAd={this.getTabButtonsAd()}
            searchType={['advanced']}
            searchsAd={this.getSearchs()}
            showSearchAd={showSearchAd}
            setShowSearchAd={this.setShowSearchAd}
            hideSearchAd={this.hideSearchAd }
            keyParam="viewcondition"
            datas={toJS(tabInfo)}
            selectedKey={viewcondition}
            onChange={this.onTabChange}
          />
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ebv9nj`}>
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4wwiqm`} spinning={loadingNow} >
              <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@uyay18`}
                comsWeaTableStore={comsWeaTableStore}
                needScroll={true}
              />
            </Spin>
          </WeaNewScroll>
        </WeaRightMenu>
      </div>
    );
  }
}

export default DocLog;
